<!-- 项目进度 -->
<template>
  	<div class="main">
		<div class="head pt32 pb32">
			<div class="back-title ft14">
				<div class="back pr32">返回</div>
				<div class="fc-black">交投项目商务平台</div>
			</div>
			<div class="right-btns ft14 fc-black">
				<div class="pr32 pointer">设置</div>
				<div class="pr24 pointer">成员</div>
			</div>
		</div>
		<div class="content pb24">
			<div class="top pb8">
				<div class="flex-row">
					<div class="flex-col col-46">
						<div class="col pt24 pb24 pl32 pr32 project_jindu">
							<div class="jindu_titile">
								<h3 class="ft16">项目进度</h3>
								<div class="follow pl8 pr8 pt8 pb6 pointer">
									<i class="icon_start_active mr8"></i>
									<span class="text ft14 pt2">取消关注</span>
								</div>
							</div>
							<div class="jindu_content pt24">
								<div class="left">
									<div class="yuan">
										<div class="nei_yuan">
										</div>
										<div class="wai_yuan">
											<el-progress type="circle" :color="'#ff8f2b'" :stroke-width="10" :width="118" :percentage="25"></el-progress>
										</div>
									</div>
								</div>
								<div class="right">
									<h3 class="fc-black ft16 pt16">交投电子商务平台</h3>
									<p class="pt24 ft14 ">
										<span class="fc-orange">逾期 12小时</span>
									</p>
									<p class="fc-gray ft14 pt16">19/08/06——19/08/19</p>
									<p class="fc-gray ft14 pt24">项目经理：<span>唐毅</span></p>
								</div>
							</div>
						</div>
					</div>
					<div class="flex-col col-25 pl16 pr16">
						<div class="col pt32 pl32 pr32 pb32 over">
							<h3 class="ft16">项目阶段</h3>
							<div class="pt32 space-between">
								<span class="ft14 fc-black">现阶段</span>
								<div class="right_xia_btn">now</div>
							</div>
							<div class="fc-gray pt12 pb12 lh24">需求分析、系统设计、集成测试、系统研发</div>
							<div class=" space-between">
								<span class="ft14 fc-black">现阶段</span>
								<div class="right_xia_btn">now</div>
							</div>
							<div class="fc-gray pt12 pb12 lh24">项目完结</div>
						</div>
					</div>
					<div class="flex-col col-sy">
						<div class="col_div">
							<div class="pr8 pb8">
								<div class="col">
									<p>基本信息</p>
								</div>
							</div>
							<div class="pl8 pb8">
								<div class="col">2</div>
							</div>
							<div class="pt8 pr8">
								<div class="col">3</div>
							</div>
							<div class="pl8 pt8">
								<div class="col">4</div>
							</div>
						</div>
					</div>
				</div>
				<!-- <el-row :gutter="20" class="row">
					<el-col :span="11">
						<div class="col">1</div>
					</el-col>
					<el-col :span="6">
						<div class="col">2</div>
					</el-col>
					<el-col :span="7">
						<div class="col">3</div>
					</el-col>
				</el-row> -->
			</div>
			<div class="bottom pt8">
				<div class="row">1</div>
				<div class="row">2</div>
				<div class="row">3</div>
			</div>
		</div>
  	</div>
</template>

<script>
export default {
	data () {
		return {
		};
	},
	components: {},

	computed: {},
	created(){},

	mounted(){},

	methods: {}
}

</script>
<style lang='scss' scoped>
	.main{
		width:1006px;
		margin: 0 auto;
		height:100%;
		// overflow:hidden;
		display:flex;
		flex-direction:column;
		.head{
			display:flex;
			justify-content:space-between;
			align-items:center;
			.back-title{
				display:flex;
				align-items:center;
				.back{
					color: #96a2aa;
				}
			}
			.right-btns{
				display:flex;
				align-items:center;
			}
		}
		.content{
			height:594px;
			// flex:1;
			// display:flex;
			// flex-direction:column;
			.top{
				height:50%;
				.flex-row{
					height:100%;
					display:flex;
					.flex-col{
						>.col{
							height:100%;
							background-color: #ffffff;
							border-radius: 6px;
							.right_xia_btn{
								width: 40px;
								height: 16px;
								background-color: #e6edfc ;
								border-radius: 2px;
								font-size: 12px;
								color: #0a52e4;
								text-align: center;
								line-height:16px;
							}
						}
						.project_jindu{
							display:flex;
							flex-direction:column;
							
							.jindu_titile{
								display:flex;
								justify-content:space-between;
								align-items:center;
								.follow{
									display:flex;
									background-color: #ffffff;
									border-radius: 4px;
									border: solid 1px #dbe1e5;
									.text{
										color: #96a2aa;
									}
								}
							}
							.jindu_content{
								flex:1;
								display:flex;
								overflow:hidden;
								.left{
									width:50%;
									.yuan{
										width:144px;
										height:144px;
										border-radius: 50%;
										// background-color:#f2f6f9;
										background: linear-gradient(#f2f6f9,#FFF);
										position: relative;
										.nei_yuan{
											width:116px;
											height:116px;
											position:absolute;
											top:14px;
											left:14px;
											z-index:999;
											background-color:#FFF;
											border-radius: 50%;
										}
										.wai_yuan{
											width:100%;
											height:100%;
											position:absolute;
											top:13px;
											left:13px;
											z-index:1000;
											border-radius: 50%;
										}
									}
								}
								.right{
									width:50%;
								}
							}
						}
					}
					.col-46{
						width:46%;
					}
					.col-25{
						width:25%;
					}
					.col-sy{
						flex:1;
						.col_div{
							height:100%;
							display:flex;
							flex-wrap:wrap;
							>div{
								width:50%;
								height:50%;
								>.col{
									height:100%;
									background-color: #ffffff;
									border-radius: 6px;
									
								}
							}
						}
					}
				}
				
			}
			.bottom{
				height:50%;
				display:flex;
				justify-content:space-between;
				align-items:center;
				.row{
					width:325px;
					height:100%;
					background-color: #ffffff;
					border-radius: 6px;
				}
			}
		}
	}
</style>